<template>
    <ul class="article-list">
        <nuxt-link
            :to="`blog/${item.id}`"
            class="article-item hvr-bounce-in el-box-init"
            v-for="item in list"
            :key="item.id"
        >
            <div class="article-star">
                <div class="star">{{ item.category_title }}</div>
            </div>
            <div class="article-cover">
                <img
                    :src="
                        item.image_url || require('@/assets/images/cover3.jpg')
                    "
                    :onerror="defaultImg"
                />
            </div>
            <div class="article-content">
                <div class="article-content_hd">
                    <h4>{{ item.title }}</h4>
                    <div class="time">
                        <i class="el-icon-date"></i>
                        创建于：{{ item.created_time | formatTime }}
                    </div>
                </div>
                <div class="article-content_bd">
                    <span>{{ item.summary }}</span>
                </div>
                <div class="article-content_ft">
                    <div class="comment">
                        <span>
                            <i class="el-icon-view"></i> {{ item.click }}
                        </span>
                        <span> <i class="el-icon-chat-dot-round"></i> 0 </span>
                    </div>
                    <div class="tag">
                        <i class="glyphicon glyphicon-tags"></i>
                        <span v-for="t in item.tags" :key="t">
                            {{ t }}
                        </span>
                    </div>
                </div>
            </div>
        </nuxt-link>
    </ul>
</template>

<script>
import image from "@/assets/images/cover3.jpg";

export default {
    name: "article-list",
    props: {
        list: {
            type: [Array],
        },
    },
    data() {
        return {
            defaultImg: 'this.src="' + image + '"',
        };
    },
};
</script>

<style lang="less" scoped>
.article-list {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: center;
    grid-row-gap: 60px;
    grid-column-gap: 60px;
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px 20px 0;

    /* 文章item */
    .article-item {
        background: #fff;
        display: flex;
        position: relative;
        width: 80%;
        color: #606f7b;

        .article-star {
            position: absolute;
            left: -8px;
            top: -8px;
            width: 100px;
            height: 100px;
            overflow: hidden;
            z-index: 30;

            .star {
                width: 220px;
                left: -70px;
                top: 25px;
                text-align: center;
                padding: 2px 0;
                position: relative;
                color: #fff;
                font-weight: 600;
                background-image: -webkit-gradient(
                    linear,
                    left top,
                    right top,
                    from(#36a8f1),
                    to(#f488a7)
                );
                background-image: linear-gradient(90deg, #36a8f1, #f488a7);
                text-shadow: 0 1px 1px rgb(0 0 0 / 20%);
                -webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
                box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

            &::before {
                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                content: "";
                display: block;
                border: 4px solid #3d4852;
                border-top-color: transparent;
                border-left-color: transparent;
                border-color: #b18585;
            }

            &::after {
                position: absolute;
                z-index: -1;
                content: "";
                display: block;
                border: 4px solid #3d4852;
                border-top-color: transparent;
                border-left-color: transparent;
                border-color: #2779bd;
                bottom: 0;
                left: 0;
            }
        }

        .article-cover {
            img {
                width: 100%;
                height: 100%;
                // -o-object-fit: cover;
                // object-fit: cover;
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;

                @media (max-width: 768px) {
                    width: 100%;
                }
            }
        }

        .article-content {
            flex: 1;
            width: 50%;
            min-width: 50%;
            display: flex;
            flex-direction: column;
            -ms-flex-direction: column;
            padding: 15px;

            .article-content_hd,
            .article-content_ft {
                font-size: 12px;
                display: flex;
                justify-content: space-between;

                h4 {
                    font-size: 16px;
                    font-weight: bold;
                    max-width: 200px;
                    white-space: nowrap;
                    word-break: break-all;
                    -ms-word-break: break-all;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                    -ms-text-overflow: ellipsis;
                    margin: 0 0 10px 0;
                }

                .time {
                    margin-top: 20px;
                    white-space: nowrap;
                }

                .tag {
                    span {
                        margin: 0 5px;
                    }
                }
            }

            .article-content_bd {
                font-size: 14px;
                text-indent: 2em;
                height: 120px;
                max-height: 120px;
                padding: 0 2em;
                margin: 10px 0;
                span {
                    height: 120px;
                    max-height: 120px;
                    display: -webkit-box;
                    -webkit-line-clamp: 6;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                }
            }
        }

        @media (max-width: 768px) {
            flex-direction: column;

            .article-cover {
                img {
                    border-bottom-left-radius: 0;
                    border-top-right-radius: 10px;
                }
            }

            .article-content {
                width: 100%;
            }
        }
    }
}
</style>